<template>
  <div id="personal">
    <div class="top_bar">
      <top-bar :title="title" v-show="IsTopbar">
        <md-icon slot="left" class="back_btn"></md-icon>
      </top-bar>
    </div>
    <div class="hich_my_home_banner">
      <img src="@/assets/imgs/my_bg_icon.png" />
    </div>
    <div class="hich_my_home_ct">
      <div class="hich_my_home_ct_one" @click="editprofile">
        <div class="hich_my_home_photo">
          <img :src="userHitchPhoto" />
        </div>
        <div class="hich_my_home_name">
          <h6>尾号{{getPhoneStort}}</h6>
          <p>
            信用分
            <span>{{userHitchScope}}</span>
          </p>
        </div>
        <div class="hich_my_home_midf">
          <md-icon name="edit_icon" class="edit_icon"></md-icon>
        </div>
      </div>
      <div class="hich_my_home_ct_two" @click="recordOrder">
        <p>
          <b>
            <img src="@/assets/imgs/my_sfcxc_icon.png" />
          </b>
          <span>接单记录</span>
          <em>
            <img src="@/assets/imgs/arrow_right.png" />
          </em>
        </p>
      </div>
      <div class="hich_my_home_ct_two" @click="managementCar">
        <p>
          <b>
            <img src="@/assets/imgs/mine_clgl_icon.png" />
          </b>
          <span>车辆管理</span>
          <em>
            <img src="@/assets/imgs/arrow_right.png" />
          </em>
        </p>
      </div>
      <div class="hich_my_home_ct_two" @click="hitchWallet">
        <p>
          <b>
            <img src="@/assets/imgs/mine_cf_icon.png" />
          </b>
          <span>顺风车费</span>
          <em>
            <img src="@/assets/imgs/arrow_right.png" />
          </em>
        </p>
      </div>
      <div class="hich_my_home_ct_two" @click="getSafetyCenter">
        <p>
          <b>
            <img src="@/assets/imgs/my_safe_icon.png" />
          </b>
          <span>安全中心</span>
          <em>
            <img src="@/assets/imgs/arrow_right.png" />
          </em>
        </p>
      </div>
      <div class="hich_my_home_ct_two" @click="getBlacklist">
        <p>
          <b>
            <img src="@/assets/imgs/my_hmd_icon.png" />
          </b>
          <span>黑名单</span>
          <em>
            <img src="@/assets/imgs/arrow_right.png" />
          </em>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/qrcode.svg';
import '@/assets/svgs/grzx_wdxc_icon.svg';
import '@/assets/svgs/edit_icon.svg';
import { Icon, Field, FieldItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
export default {
  components: {
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      title: '我的顺风车',
      IsTopbar: true,
      userid: '',
      userHitchScope: '', // 信用分
      userPhone: '',
      userHitchPhoto: ''
    };
  },
  created() {
    // 获取司机个人信息
    if (Utils.isApp()) {
      this.userid = this.$route.query.userid;
      // 判断当前环境是否在app
      this.IsTopbar = false;
      try {
        this.setHeader(this.title);
      } catch (e) {
        console.log(e);
      }
    }
    Loading.show();
    http.post('/pakj/hitchDriverManageApiController/getHitchDriverDetail', {}).then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        console.log(res.data);
        this.userHitchPhoto = res.data.data.userImg;
        this.userHitchScope = res.data.data.credibilityScore;
        this.userPhone = decryptByDESModeEBC(res.data.data.driverPhone);
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        // handler.setTopText(text);
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    },
    // 接单记录
    recordOrder() {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        handler.goToRecordOrder();
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.goToRecordOrder.postMessage();
      }
    },
    // 编辑个人资料
    editprofile() {
      this.$router.push({
        name: 'hitchhikeEditprofile',
        query: {
          tk: this.$route.query.tk
        }
      });
    },
    // 车辆管理
    managementCar() {
      this.$router.push({
        name: 'hitchManagementCar',
        query: {
          tk: this.$route.query.tk
        }
      });
    },
    // 顺风车费
    hitchWallet() {
      this.$router.push({
        name: 'hitchWallet',
        query: {
          tk: this.$route.query.tk
        }
      });
    },
    // 安全中心
    getSafetyCenter() {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        handler.goToDriverSafetyCenter();
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.goToDriverSafetyCenter.postMessage();
      }
    },
    // 黑名单
    getBlacklist() {
      this.$router.push({
        name: 'hitchhikeBlackList',
        query: {
          tk: this.$route.query.tk
        }
      });
    }
  },
  computed: {
    getPhoneStort() {
      let str = this.userPhone;
      if (!str) {
        return '';
      }
      return str.substr(str.length - 4);
    }
  }
};
</script>
<style lang="stylus" scoped>
p, h6 {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#personal {
  height: 100vh;
  background-color: color-primary-background;
}

.hich_my_home_banner {
  height: 380px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 5;
}

.hich_my_home_banner img {
  width: 100%;
}

.hich_my_home_ct {
  width: 90%;
  margin: 0px 5%;
  position: absolute;
  top: 200px;
  left: 0px;
  z-index: 6;
}

.hich_my_home_ct_one {
  height: 240px;
  background-color: #fff;
  border-radius: 7px;
}

.hich_my_home_ct_two {
  height: 120px;
  background-color: #fff;
  border-radius: 7px;
  margin-top: 10px;
}

.hich_my_home_ct_two p {
  line-height: 120px;
  padding-left: 30px;
  font-size: 30px;
  color: #666;
}

.hich_my_home_ct_two p b {
  position: relative;
}

.hich_my_home_ct_two p b img {
  width: 48px;
  height: 48px;
  position: relative;
  top: 15px;
}

.hich_my_home_ct_two p span {
  margin-left: 20px;
}

.hich_my_home_ct_two p em {
  float: right;
  margin-right: 30px;
}

.hich_my_home_ct_two p em img {
  width: 12px;
  height: 20px;
}

.hich_my_home_photo {
  float: left;
}

.hich_my_home_photo img {
  width: 140px;
  height: 140px;
  margin-left: 30px;
  margin-top: 50px;
  border-radius: 50%;
}

.hich_my_home_name {
  float: left;
  margin-left: 20px;
}

.hich_my_home_name h6 {
  margin-top: 92px;
  color: #4A4A4A;
  font-size: 32px;
  font-weight: 400;
}

.hich_my_home_name p {
  margin-top: 10px;
  color: #666;
  font-size: 24px;
}

.hich_my_home_name p span {
  color: #FF6917;
}

.hich_my_home_midf {
  float: right;
  margin-top: 100px;
  margin-right: 30px;
}

.edit_icon {
  width: 40px;
  height: 40px;
}
</style>
